<template>
	<view class="create-bg">
		<view class="create-inner">
			<u-form :model="form" ref="uForm">
				<u-form-item label="所学汉字" prop="character">
					<u-input v-model="form.character" type="text" placeholer="请输入汉字" />
				</u-form-item>
				<u-form-item label="所学日期">
					<u-input v-model="form.date" type="text" disabled placeholder="请选择日期"
						@click="showCalendar = true" />
				</u-form-item>
				<u-form-item label="选择日期">
					<u-button type="primary" size="mini" @click="showCalendar = true">选择日期</u-button>
				</u-form-item>
			</u-form>
		</view>
		<u-calendar v-model="showCalendar" :mode="mode" @change="handleDateChange"></u-calendar>
		<CommonButtons :btnList="btnList" @handle-dealwith="handleDealwith"></CommonButtons>
		<!-- 正在加载 -->
		<Loading v-if="showLoading" :gifUrl="gifUrl"></Loading>
	</view>
</template>

<script>
	let me;
	import CommonButtons from "@/components/common/commonButtons.vue";
	import funcs from "@/static/js/func.js"
	import Loading from "@/components/common/isLoading.vue"
	export default {
		data() {
			return {
				form: {
					character: "",
					date: ""
				},
				showCalendar: false,
				mode: "date",
				btnList: [ // 按钮列表
					{
						id: 1,
						title: "取消",
						action: "cancel",
						color: "gray",
						icon: "icon-cuowukongxin"
					},
					{
						id: 2,
						title: "保存",
						action: "save",
						color: "#27B727",
						icon: "icon-zhengque"
					},
				],
				// 正在加载
				showLoading: false,
				gifUrl: "",
			}
		},
		components: {
			CommonButtons,
			Loading
		},
		mounted() {
			me = this;
		},
		methods: {
			/**
			 * 当前所选日期
			 * @param {Object} e
			 */
			handleDateChange(e) {
				me.form.date = e.result;
			},
			/**
			 * 点底下的按钮去处理

			 * @param {Object} data
			 */
			handleDealwith(data) {
				if (data.action == "cancel") {
					me.$emit("handle-cancel-add");
				} else if(data.action == "save") {
					if(!me.form.character) {
						funcs.showModalTips("请输入所学汉字")
						return
					} else if(!me.form.date) {
						funcs.showModalTips("请选择所学日期")
						return
					}
					me.gifUrl = `isLoading`;
					me.showLoading = true;
					let charactersList = me.form.character.split("、");
					charactersList.forEach(item =>{
						me.$api.requestTask("/addNewChineseCharacter", {
							character: item,
							date: me.form.date
						}, res => {
							me.showLoading = false;
							if (res.code == "200") {
								funcs.showModalTips("添加成功")
								me.$emit("handle-cancel-add");
							} else {
								funcs.showModalTips(res.msg || "添加失败，请稍后再试")
							}
						}, err => {
							me.showLoading = false;
							funcs.showModalTips("对不起，系统异常，请稍后再试")
						});
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.create-bg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0%;
		z-index: 10;
		background-color: rgba(0, 0, 0, .5);

		.create-inner {
			width: 70vw;
			height: 60vh;
			margin: 20vh 15vw auto 15vw;
			z-index: 11;
			background-color: #fff;
			padding: 16rpx;

			.u-form {
				.u-form-item {
					/deep/.u-form-item__body {
						.u-form-item--left {
							width: 160rpx !important;
							flex: 0 0 160rpx !important;
						}
					}
				}
			}
		}
	}
</style>